<template>
  <div class="contract_editing_view">
    <div style="border: 1px solid #ccc">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>
  </div>
</template>

<script>
import "@wangeditor/editor/dist/css/style.css"; // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
const baseUrl = import.meta.env.VITE_BASE_URL;
const token = sessionStorage.getItem("token");
export default {
  components: { Editor, Toolbar },
  setup() {
    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef();

    // 内容 HTML
    const valueHtml = ref("<p>hello</p>");

    // 模拟 ajax 异步获取内容
    onMounted(() => {
      setTimeout(() => {
        valueHtml.value = "<p>模拟 Ajax 异步设置内容</p>";
        let keys = editorRef.value.getAllMenuKeys(); // 获取所有菜单key
        console.log(keys);
      }, 1500);
    });

    const toolbarConfig = {};
    const editorConfig = {
      placeholder: "请输入内容...",
      MENU_CONF: {
        uploadImage: {
          server: `${baseUrl}/api/order/upload?type=alipay`,
          fieldName: "file",
          headers: {
            Accept: "text/x-json",
            authorization:
              "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjY1NmM4YWIyMjcyNjAzZjM4MjJiOGM3MCIsImlhdCI6MTcxNjY0NTg1NiwiZXhwIjoxNzE5MjM3ODU2fQ.UGO9qbvK8dBqz52VHCenAHJe4ipG8JDezFIUdcMbQNo",
          },
          // 自定义插入图片
          customInsert(res, insertFn) {
            console.log("customInsert", res);
            const { url } = res;
            // TS 语法
            // customInsert(res, insertFn) {                  // JS 语法
            // res 即服务端的返回结果

            // 从 res 中找到 url alt href ，然后插入图片
            insertFn(baseUrl + "/" + url);
          },
          // 上传之前触发
          onBeforeUpload(file) {
            // TS 语法
            // onBeforeUpload(file) {    // JS 语法
            // file 选中的文件，格式如 { key: file }
            return file;

            // 可以 return
            // 1. return file 或者 new 一个 file ，接下来将上传
            // 2. return false ，不上传这个 file
          },

          // 上传进度的回调函数
          onProgress(progress) {
            // TS 语法
            // onProgress(progress) {       // JS 语法
            // progress 是 0-100 的数字
            console.log("progress", progress);
          },

          // 单个文件上传成功之后
          onSuccess(file, res) {
            // TS 语法
            // onSuccess(file, res) {          // JS 语法
            console.log(`${file.name} 上传成功`, res);
          },

          // 单个文件上传失败
          onFailed(file, res) {
            // TS 语法
            // onFailed(file, res) {           // JS 语法
            console.log(`${file.name} 上传失败`, res);
          },

          // 上传错误，或者触发 timeout 超时
          onError(file, err, res) {
            // TS 语法
            // onError(file, err, res) {               // JS 语法
            console.log(`${file.name} 上传出错`, err, res);
          },
        },
      },
    };

    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
      const editor = editorRef.value;
      if (editor == null) return;
      editor.destroy();
    });

    const handleCreated = (editor) => {
      editorRef.value = editor; // 记录 editor 实例，重要！
    };

    return {
      editorRef,
      valueHtml,
      mode: "default", // 或 'simple'
      toolbarConfig,
      editorConfig,
      handleCreated,
    };
  },
};
</script>

<style scoped>
.contract_editing_view {
  background-color: #f5f5f5;
}
</style>